<template>
  <div class="weideng">
    <div class="top">
        <div class="ling">
          <van-icon name="" class="bell"/>
          <van-icon name="bell" class="bell"/>
        </div>
        <div class="touxiang" @click="tuiChu">
          <div class="l">
            <van-image
              round
              class="image"
              width="5rem"
              height="5rem"
              src="http://www.sunlulu.club/img/tx.jpg"
            />
            <h4>xiaopiu_</h4>
          </div>
          <div class="r">
            <van-icon name="arrow" class="arrow"/>
          </div>
        </div>
    </div>
    <div class="mid">
        <div class="mid1">
          <van-cell is-link>
            <van-icon name="contact" class="icon1"/>
            <span>个人资料</span>
          </van-cell>
        </div>
        <div class="mid1" @click="dian">
          <van-cell is-link>
            <van-icon name="balance-o" class="icon1"/>
            <span>咖啡钱包</span>
          </van-cell>
        </div>
        <div class="mid1" @click="dian1">
          <van-cell is-link>
            <van-icon name="coupon-o" class="icon1"/>
            <span>优惠券</span>
          </van-cell>

        </div>
        <div class="mid1" @click="dian2">
          <van-cell is-link>
            <van-icon name="refund-o" class="icon1"/>
            <span>兑换优惠</span>
          </van-cell>
        </div>
        <div class="mid1" @click="dian3">
          <van-cell is-link>
            <van-icon name="idcard" class="icon1"/>
            <span>发票管理</span>
          </van-cell>
        </div>
    </div>

    <div class="help">
      <div class="help1">
        <van-cell is-link>
              <van-icon name="like-o" class="icon2"/>
              <span>帮助反馈</span>
          </van-cell>
        </div>
    </div>

    <div class="bottom">
      <img src="http://www.sunlulu.club/img/lb1.jpg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  methods: {
    dian() {
      this.$router.push({name:'QianBao'});
    },
    dian1() {
      this.$router.push({name:'Juan'});
    },
    tuiChu() {
      //点击头像判断是否退出
      var r = confirm('是否退出？')
    if(r == true) {
      // console.log("aaa")
      localStorage.removeItem("token")
      this.$router.push({name:'Me'});
    }else{
      // console.log("bbb")
    }

    },
    dian2(){
      this.$router.push({name:'DuiHuan'});
    },
    dian3(){
      this.$router.push({name:'FaPiao'});
    }
  }
}
</script>

<style scoped>

  .ling{
    display: flex;
    justify-content: space-between;
  }
  .bell{
    color: white;
    font-size: 18px;
    /* margin-left: 335px; */
  }
  .top{
    background: url("http://www.sunlulu.club/img/bg.jpg");
    padding:20px 20px 54px;
  }
  .touxiang{
    display: flex;
    justify-content: space-between;
  }
  .touxiang h4{
    color: white;
    margin-top: 35px;
    margin-left: 12px;
  }
  .touxiang .arrow{
    color: white;
    margin-top: 38px;
  }
  .l{
    display: flex;
  }

  .mid{
    height: 250px;
    /* background: pink; */
    padding: 0 0 0 10px;
  }
  .icon1{
    font-size: 20px;
  }
  .mid1{
    height: 20%;
    border-bottom: solid 1px gainsboro;
  }
  .mid1 span{
    font-size: 16px;
    margin-left: 5px;
    margin-top: 5px;
  }
  .help{
    overflow: hidden;
    height: 60px;
    background: ghostwhite;
  }
  .help1{
    height: 50px;
    margin-top: 10px;
  }
  .icon2{
    font-size: 20px;
    margin-left: 10px;
  }
  .help span{
    margin-top: 15px;
    font-size: 16px;
    margin-left: 5px;
  }
  .bottom{
    padding: 5px 20px;
    background: ghostwhite;
  }
  .bottom img{
    width: 100%;
  }
</style>

